<template>
  <div>

    <el-container>
      <el-header>
        <!-- 顶部-->
        <div>
          <welTop></welTop>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--左侧-->
          <div style="width: 200px;">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item index="1">
                <i class="el-icon-s-home"></i>
                <span slot="title">系统首页</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <!--主要内容-->
          <div class="container">
            <el-row>
<!--              <el-col :span="8"><div class="grid-content bg-purple">
&lt;!&ndash;                <div style="margin-bottom: 15px;">
                  <el-button style="width: 330px;height: 50px;margin-top: 25px;margin-left: 10px;" type="danger">填写认定须知</el-button>
                </div>&ndash;&gt;
&lt;!&ndash;                <div style="margin-top: 15px;">
                  <el-button style="width: 330px;height: 50px;margin-left: 10px;"  type="success" @click="dialogResultVisible = true,queryResult()">查询评定结果</el-button>
                </div>&ndash;&gt;

&lt;!&ndash;                <div style="margin-top: 15px;">
                  <el-button style="width: 330px;height: 50px;margin-left: 10px;"  type="warning">查看投票结果</el-button>
                </div>&ndash;&gt;
              </div></el-col>-->
              <el-col :span="8"><div class="grid-content bg-purple-light">
                <div style="margin-bottom: 15px;">
                  <el-button style="width: 330px;height: 90px;margin-top: 20px;margin-left: 10px;" type="primary" @click="dialogFormVisible = true">绿色通道</el-button>
                </div>
                <div style="margin-top: 15px;">
                  <el-button style="width: 330px;height: 90px;margin-left: 10px;"  type="success" @click="addVote()">参与投票</el-button>
                </div>
              </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <div style="margin-bottom: 15px;">
                  <el-button style="width: 330px;height: 90px;margin-top: 20px;margin-left: 10px;" type="info" @click="unGreenFormVisible = true">非绿色通道</el-button>
                </div>
                <div style="margin-top: 15px;">
                  <el-button style="width: 330px;height: 90px;margin-left: 10px;"  type="success" @click="dialogResultVisible = true,queryResult()">查询评定结果</el-button>
                </div>
                <div>
                  <el-dialog title="评审结果" :visible.sync="dialogResultVisible">
                    <div class="block">
                      <el-timeline>
                        <el-timeline-item
                          v-for="(activity, index) in activities"
                          :key="index"
                          :icon="activity.icon"
                          :type="activity.type"
                          :color="activity.color"
                          :size="activity.size"
                          :timestamp="activity.timestamp">
                          {{activity.content}}
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-dialog>
                </div>
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
          </div>
          <div>
            <el-dialog title="绿色绿色信息" :visible.sync="dialogFormVisible" center>
              <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="学号" prop="studentId" :label-width="formLabelWidth">
                  <el-input v-model="form.studentId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" prop="identity_id" :label-width="formLabelWidth">
                  <el-input v-model="form.identity_id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学院" prop="college" :label-width="formLabelWidth" >
                  <el-select v-model="form.college" placeholder="请选择学院">
                    <el-option label="信息工程学院" value="信息工程学院"></el-option>
                    <el-option label="经济管理学院" value="经济管理学院"></el-option>
                    <el-option label="教师教育学院" value="教师教育学院"></el-option>
                    <el-option label="学前与特殊教育学院" value="学前与特殊教育学院"></el-option>
                    <el-option label="体育学院" value="体育学院"></el-option>
                    <el-option label="人文学院" value="人文学院"></el-option>
                    <el-option label="外国语学院" value="外国语学院"></el-option>
                    <el-option label="音乐舞蹈学院" value="音乐舞蹈学院"></el-option>
                    <el-option label="美术与艺术设计学院" value="美术与艺术设计学院"></el-option>
                    <el-option label="机电工程学院" value="机电工程学院"></el-option>
                    <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                    <el-option label="旅游学院" value="旅游学院"></el-option>
                    <el-option label="化学化工学院" value="化学化工学院"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="classroom" :label-width="formLabelWidth">
                  <el-input v-model="form.classroom" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">&nbsp;上传附件</el-divider>
                <div style="margin: 10px 50px;">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    name="enclosureFile"
                    :action="uploadUrl()"
                    accept="application/msword,application/pdf"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="fileuploadSuccess"
                    :on-progress="fileUploading"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="medium" type="primary">选取文件<i class="el-icon-upload el-icon--right"></i></el-button>
                    <div slot="tip" class="el-upload__tip">只能上传pdf或者word文件</div>
                  </el-upload>
                </div>
                <el-form-item style="margin-top: 35px;">
                <el-button type="primary" @click="addStuInfor('form')">确 定</el-button>
                <el-button @click="resetFrom('form')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
          <div>
            <el-dialog title="非绿色填报信息" :visible.sync="unGreenFormVisible" center>
              <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="学号" prop="studentId" :label-width="formLabelWidth">
                  <el-input v-model="form.studentId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" prop="identity_id" :label-width="formLabelWidth">
                  <el-input v-model="form.identity_id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学院" prop="college" :label-width="formLabelWidth" >
                  <el-select v-model="form.college" placeholder="请选择学院">
                    <el-option label="信息工程学院" value="信息工程学院"></el-option>
                    <el-option label="经济管理学院" value="经济管理学院"></el-option>
                    <el-option label="教师教育学院" value="教师教育学院"></el-option>
                    <el-option label="学前与特殊教育学院" value="学前与特殊教育学院"></el-option>
                    <el-option label="体育学院" value="体育学院"></el-option>
                    <el-option label="人文学院" value="人文学院"></el-option>
                    <el-option label="外国语学院" value="外国语学院"></el-option>
                    <el-option label="音乐舞蹈学院" value="音乐舞蹈学院"></el-option>
                    <el-option label="美术与艺术设计学院" value="美术与艺术设计学院"></el-option>
                    <el-option label="机电工程学院" value="机电工程学院"></el-option>
                    <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                    <el-option label="旅游学院" value="旅游学院"></el-option>
                    <el-option label="化学化工学院" value="化学化工学院"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="classroom" :label-width="formLabelWidth">
                  <el-input v-model="form.classroom" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">&nbsp;上传附件</el-divider>
                <div style="margin: 10px 50px;">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    name="enclosureFile"
                    :action="uploadUrl()"
                    accept="application/msword,application/pdf"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="fileuploadSuccess"
                    :on-progress="fileUploading"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="medium" type="primary">选取文件<i class="el-icon-upload el-icon--right"></i></el-button>
                    <div slot="tip" class="el-upload__tip">只能上传pdf或者word文件</div>
                  </el-upload>
                </div>
                <el-form-item style="margin-top: 35px;">
                  <el-button type="primary" @click="unGreenAddStuInfor('form')">确 定</el-button>
                  <el-button @click="resetFrom('form')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import welTop from "@/components/welTop"

export default {
  name: "home",
  components: {
    welTop
  },
  data() {

    return{
      test: '',
      dialogFormVisible: false,
      unGreenFormVisible: false,
      dialogResultVisible: false,
      fileList: [],
      rules: {
        studentId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 12, max: 12,message: '请输入正确的学号',trigger: 'blur' }
        ],
        name: [
          {required: true,message:'请输入姓名',trigger: 'blur'},
          {min: 2,max: 10,message: '字符长度为2 到 10',trigger: 'blur'}
        ],
        phone: [
          {required: true,message:'请输入手机号码',trigger: 'blur'},
          {min: 11,max: 11,message: '手机号码格式不对',trigger: 'blur'}
        ],
        identity_id: [
          {required: true,message:'请输入身份证号码',trigger: 'blur'},
          {min: 18,max: 18,message: '身份证号码格式不对',trigger: 'blur'}
        ],
      },
    form: {
        id: '',
        studentId: '',
        name: '',
        phone: '',
        identity_id: '',
        college: '',
        classroom:''
    },
      formLabelWidth: '120px',
      activities:[]
    }
  },
  created() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 上传附件URL
    uploadUrl: function () {
      return (
        'http://localhost:8888/student/addFile/' + this.form.studentId
      )
    },
    // 文件上传成功时的钩子
    fileuploadSuccess () {
      this.loading = false
      this.$message({
        message: '恭喜你，文件上传成功',
        type: 'success'
      })
    },
    // 上传文件之前的钩子
    beforeUpload (file) {
      if (file.type !== 'application/msword' || file.type !== 'application/pdf') {
        this.$message({
          message: '警告哦，只能上传pdf或者word文件',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 文件上传时的钩子
    fileUploading () {
      this.loading = true
      this.$message('文件正在上传，请稍后....')
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview (file) {
      console.log(file)
    },
    // 创建作业并上传附件
    addStuInfor(form) {
      var green = 1
      this.form.id = localStorage.getItem('student_id')
      console.log(this.form)
      this.$refs[form].validate((valid) => {
        // 上传表单信息
        if (valid) {
          // 上传附件
          this.$refs.upload.submit()
          // 提交表单给后端
          this.$axios.post('http://localhost:8888/student/add/' + green ,this.form).then(res => {
            console.log(res)
            if (res.data.code==0) {
              this.$message({
                message: '恭喜你，文件添加成功',
                type: 'success'
              })
              // 清空表单数据

              this.form.studentId = ''
              this.form.name = ''
              this.form.phone= ''
              this.form.identity_id= ''
              this.form.college = ''
              this.form.classroom = ''
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    unGreenAddStuInfor(form){
      var  green=0
      this.form.id = localStorage.getItem('student_id')
      console.log(this.form)
      this.$refs[form].validate((valid) => {
        // 上传表单信息
        if (valid) {
          // 上传附件
          this.$refs.upload.submit()
          // 提交表单给后端
          this.$axios.post('http://localhost:8888/student/add/' + green,this.form).then(res => {
            console.log(res)
            if (res.data.code==0) {
              this.$message({
                message: '恭喜你，文件添加成功',
                type: 'success'
              })
              // 清空表单数据

              this.form.studentId = ''
              this.form.name = ''
              this.form.phone= ''
              this.form.identity_id= ''
              this.form.college = ''
              this.form.classroom = ''
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },

    // 重置表单
    resetFrom(form) {
      this.$refs[form].resetFields()
    },
    queryResult(){
      var id= localStorage.getItem("student_id")
      this.$axios.get('/student/result/'+id).then(res => {
        console.log(res)
        if (res.data.code==0){
          this.$message("查看评审结果成功")
          this.activities=res.data.data
        }
      })
    },
    addVote(){
      this.$router.push({path:'/addVote'})
    }
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  background-color: #eee;
  height: 500px;
  margin-top: -25px;
}
.el-row {
  margin-bottom: 10px;
  margin-top: 20px;}


:last-child {
  margin-bottom: 0;
}


.el-col {
  border-radius: 4px;
}
.bg-purple {
  /*background: #d3dce6;*/
}
.bg-purple-light {
  /*background: #e5e9f2;*/
}
.grid-content {
  border-radius: 4px;
  min-height: 200px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
